<template>
    <div>
        <div>
            <el-row type="flex">
                <el-col :span="8"></el-col>
                <el-col :span="8">
                    <div class="box">
                        <h1 class="header">任务列表</h1>
                        <el-row type="flex">
                            <el-col :span="8">任务总数 {{checkboxList.length}}</el-col>
                            <el-col :span="8">还是{{num()}}没有完成</el-col>
                            <el-col :span="8">
                                <el-button 
                                type="text" 
                                class="borderNone"
                                @click="finish()"
                                >完成</el-button></el-col>
                        </el-row>
                        <div>
                              <el-checkbox-group v-model="checkList">
                                <div class="listMar"
                                    v-for="(item , index) of checkboxList" :key="index">
                                    <el-checkbox 
                                    @change="chii(index)"
                                    :label="item.name"
                                    :disabled="item.bol">
                                       <span
                                       @click="itemClick(index)"
                                        v-if="!item.edit"
                                        >
                                        {{item.name}}</span>
                                        <el-input  
                                        v-if="item.edit" 
                                        v-model="item.name"
                                        @blur="itemBlur(index)"
                                        ></el-input>
                                    </el-checkbox>
                                    </div>
                               
                            </el-checkbox-group>
                        </div>
                        <div>
                            <el-row type="flex">
                                <el-col :span="18">
                                    <el-input v-model="addName"></el-input>
                                </el-col>
                                <el-col :span="6">
                                    <el-button  @click="add()">添加</el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8"></el-col>
            </el-row>

        </div>
    </div>
</template>
<script>
export default {
    name:"App",
    data(){
        return{
            addName:"",
               checkList: [],
               checkboxList:[
                    {
                        name:"UI设计",
                        bol:false,//是否禁用
                        edit:false,//是否编辑
                    },
                    {
                        name:"Web前端",
                        bol:false,//是否禁用
                        edit:false,//是否编辑
                    },
                    {
                        name:"JAVA后端",
                        bol:false,//是否禁用
                        edit:false,//是否编辑
                    }
               ]
        }
    },
    methods:{
        add(){
            let _self = this;
            _self.checkboxList.push({
                name:_self.addName,
                bol:false,//是否禁用
                edit:false,//是否编辑
            })
            _self.addName = ""
        },
        finish(){
            let _self = this;
            let list = [];
            for(let index in _self.checkboxList){
                if(!_self.checkboxList[index].bol){
                    list.push(_self.checkboxList[index])
                }
            }
            _self.checkboxList = list;
        },
        chii(index){
            let _self = this;
            _self.checkboxList[index].bol = true;
        },
        itemClick(index){
            let _self = this;
            _self.checkboxList[index].edit = true;
        },
        itemBlur(index){
            let _self = this;
            _self.checkboxList[index].edit = false;
        },
        // 页面的花括号绑定函数 该函数return的值会显示在花括号里面
        num(){
            let _self = this;
            let num = 0 ;
            for(let item of _self.checkboxList){
                if(!item.bol){
                    num++
                }
            }
            return num
        }
    }
}
</script>
<style scoped>
    .header{
        font-size: 30px;
        padding-bottom: 20px;
        color: antiquewhite;
    }
    .box{
        background-color: aqua;
        padding: 20px;
    }
    .borderNone{
        padding: 0;
    }
    .listMar{
        margin :20px 0;
    }
</style>